<template>
    <article id="city-climate">
        <div class="public-header-content">
            <div class="header">
                <i></i>城市气候
            </div>
            <div class="content clearfix">
                <aside v-html="isNull0(getCityDetails.climate)"></aside>
                <div class="echart-chart">
                    <div class="inside">
                        <header>近一年平均气温</header>
                        <div class="chartBox clearfix">
                            <div class="chart-div" id="almost-a-year-average-temperature-chart" v-show="!chartNoDataShow" style="height: 300px;"></div>
                            <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>

</template>

<script>
    export default {
        data() {
            return {
                cityId: null, //城市Id
                chartNoDataShow: false, //判断是否有无数据
                myEcharts: null, //图表
            }
        },
        computed: {
            //从state获取城市详情数据
            getCityDetails() {
                if(this.$store.getters.get_cityDetails){
                    if(Object.keys(this.$store.getters.get_cityDetails).length != 0){
                        // 获取近一年平均气温
                        this.getAnnualMeanTemperature();
                    }
                }
                return this.$store.getters.get_cityDetails
            },
        },
        created() {
        },
        mounted() {
            this.myEcharts = echarts.init(document.getElementById('almost-a-year-average-temperature-chart'));
            this.myEcharts.showLoading();
            window.addEventListener('resize', () => {
                this.myEcharts.resize();
            });
        },
        methods: {
            //获取近一年平均气温
            getAnnualMeanTemperature(){
                this.cityId = this.$store.getters.get_cityDetails.id;
                this.$get('/city/temperature/'+ this.cityId).then(res => {
                    if (res.status == 0) {
                        this.chartNoDataShow = false;
                        this.annualMeanTemperature_charts(res.data)
                    } else {
                        console.log(res.msg);
                        this.chartNoDataShow = true;
                    }
                });

            },
            //一年平均气温——折线图
            annualMeanTemperature_charts(data){
                this.myEcharts.hideLoading();
                //十二个月
                let  dateList = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
                //最高温
                let  high_temperatureList = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].type == 2) {
                        high_temperatureList = [data[i].jan, data[i].feb, data[i].mar, data[i].apr, data[i].may, data[i].jun, data[i].jul, data[i].aug, data[i].sep, data[i].oct, data[i].nov, data[i].dec];
                    }
                }
                //最低温
                let  low_temperatureList = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].type == 1) {
                        low_temperatureList = [data[i].jan, data[i].feb, data[i].mar, data[i].apr, data[i].may, data[i].jun, data[i].jul, data[i].aug, data[i].sep, data[i].oct, data[i].nov, data[i].dec];
                    }
                }
                let markPoint = {
                    data: [
                        { type: 'max', name: '最大值', symbolSize: 65 },
                        { type: 'min', name: '最小值', symbolSize: 65 }
                    ],
                    label: {
                        normal: {
                            formatter: function(value) {
                                return value.data.value + '℃';
                            }
                        }
                    }
                };
                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['平均最高温', '平均最低温']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: function(value) {
                                return value + '℃';
                            }
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [
                        {
                            name: '平均最高温',
                            type: 'line',
                            smooth: true,
                            data: high_temperatureList,
                            markPoint: markPoint,
                        },
                        {
                            name: '平均最低温',
                            type: 'line',
                            smooth: true,
                            data: low_temperatureList,
                            markPoint: markPoint,
                        }
                    ],
                    color: ['#40c3f9', '#ffbf53'],
                });
            }
        },
        components: {}
    }
</script>
<style scoped lang="less" type="text/less">
</style>